<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body class="dpflex fdc">
    <!-- 轮播图 -->
    <div class="rotation">
        <!-- 轮播开始 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/lb1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../img/lb2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../img/lb3.jpg" alt="">
                </div>

            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 轮播结束-->
    </div>

    <!-- 中间内容 -->
    <div class="main flex1">
       <!-- 今日排名与打卡 -->
       <div class="rank-and-clock-in mt20 dpflex">
            <!-- 今日排名 -->
        <div class="rank por">
            <p class="rank-text poa">今日排名</p>
            <p class="rank-num poa" id="rankNum"></p>
        </div>
        <!-- 打卡 -->
        <div class="punch por">
            <p class="punch-all poa">累计打卡<span id="punchNum"></span>天</p>
            <p class="punch-btn poa" id="punchBtn"></p>
        </div>
       </div>
        <!-- 运动数据与徽章 -->
        <div class="data-and-badges mt20 dpflex">
            <!-- 运动数据 -->
        <div class="motion-data por" id="motionData"><span class="motion-text poa">运动数据</span></div>
        <!-- 徽章 -->
        <div class="badge por" id="badge">
            <p class="badge-text poa">累计运动徽章</p>
            <p class="badge-num poa"><span id="badgeNum" class="badge-number"></span>枚</p>
        </div>
        </div>
        <!-- 课程训练 -->
        <div class="course-train por" id="courseTrain"><span class="course-text poa">课程训练</span></div>
        <!-- 户外跑步 -->
        <div class="outdoor-run por" id="run"><span class="outdoor-text poa">户外跑步</span></div>
    </div>

    <!-- 底部导航栏 -->
    <div id="footer">
    </div>

    <!--  引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>